<template>
    <div class="checkbox-container">
        <div class="menu">
            <h2>菜单配置</h2>
            <h2>{{ counter.menuList }}</h2>
            <el-checkbox
                v-model="checkAll"
                :indeterminate="isIndeterminate"
                @change="handleCheckAllChange"
                >Check all</el-checkbox
            >
            <el-checkbox-group
                v-model="checkedCities"
                @change="handleCheckedCitiesChange"
            >
                <el-checkbox
                    v-for="city in cities"
                    :key="city"
                    :label="city"
                    >{{ city }}</el-checkbox
                >
            </el-checkbox-group>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useCounterStore } from '@/pinia/counter'
import { onMounted, ref } from 'vue'

const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref(['Shanghai', 'Beijing'])
const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']

const counter = useCounterStore()

const handleCheckAllChange = (val: boolean) => {
    checkedCities.value = val ? cities : []
    isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {
    console.log('🚀 ~ file: index.vue:39 ~ handleCheckedCitiesChange ~ value:', value)
    const checkedCount = value.length
    checkAll.value = checkedCount === cities.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}

onMounted(() => {
    counter.menuList.setting = false
})
</script>

<style lang="scss" scoped>
.checkbox-container {
    padding: 20px;
}
</style>
